import { reqHasTredemark, reqDelTredemark } from '@/API/product/trademark/index.js'
import { ref } from 'vue'
import { TredemarkData } from '@/API/product/trademark/type.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

export default (pageNo, limit, total, dialogFromVisible) => {
  /* 品牌数据的数组 */
  const trademarkArr = ref([])
  /* 品牌新收集的数据 */
  const trademarkParams = ref<TredemarkData>({
    tmName: '',
    logoUrl: ''
  })
  /* 添加品牌按钮的回调 */
  const addTrademark = () => {
    dialogFromVisible.value = true
    /* 解决bug,在点击确认我们没有输入内容取消后,再次打开后依旧有表单检验的错误,完善逻辑,因为我们的对话框在第一次打开之前是没有这个组件的,所以会导致我们获取不到其内部的input的组件,故而报错,找不到变量 
    第一种方法,运用其TS语法链判断,是否有该对象...第二种方法,运用Vue的nextTick()方法回调,在我们页面进行新一次DOM渲染后执行.防止找不到元素的报错. */
  }
  /* 修改品牌按钮的回调
     <!-- 利用row内的当前存储的数据传参给我们的编写的数据中...实现点击后有我们的数据 -->
     使用ES6中的Object的assign方法,将对象进行浅复制,会丢失响应式..
  */
  const updateTrademark = (row) => {
    dialogFromVisible.value = true
    Object.assign(trademarkParams.value, row)
    /* 优化bug,在我们打开修改按钮时候,我们清空其表单检验的错误! */
  }
  /* 清空我们收集数据的办法 */
  const trademarkParamsClear = () => {
    trademarkParams.value.id = 0
    trademarkParams.value.tmName = ''
    trademarkParams.value.logoUrl = ''
  }
  /* 获取数据的方法 */
  const getHasTredemark = async () => {
    const result = await reqHasTredemark(pageNo.value, limit.value)
    console.log(result)
    if (result.code == 200) {
      /* 存储已有品牌的数据 */
      total.value = result.data.total
      trademarkArr.value = result.data.records
    }
  }
  const deltTrademark = async (id) => {
    ElMessageBox.confirm('点击后会删除该品牌', '删除品牌', {
      distinguishCancelAndClose: true,
      confirmButtonText: '删除',
      cancelButtonText: '取消'
    })
      .then(async () => {
        const result = await reqDelTredemark(id)
        if (result.code == 200) {
          ElMessage({
            type: 'info',
            message: '删除成功'
          })
          getHasTredemark()
        } else {
          ElMessage({
            type: 'error',
            message: '删除失败'
          })
        }
      })
      .catch((action: Action) => {
        ElMessage({
          type: 'info',
          /* action为true时,是我们点击取消按钮,false为我们点击其他,退出弹出框 */
          message: action === 'cancel' ? '放弃删除' : '取消删除'
        })
      })
  }

  return {
    trademarkArr,
    trademarkParams,
    addTrademark,
    updateTrademark,
    trademarkParamsClear,
    getHasTredemark,
    deltTrademark
  }
}
